<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
    <body>
        <p class="myclass">Apple</p>
        <p class="myclass">Pear</p>
        <p id="myId">Banana</p>
        <svg>
            <rect></rect>
            <rect></rect>
        </svg>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
       
    </body>
    <script>
        // var p1 = d3.selectAll(".myclass")
        // p1.style("color","red")
        //d3.select("#myId").append("p").text("append e element")
        // d3.select("#myId").remove()
        // var width = 300
        // var height = 300
        // var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)
        var dataset = [2.5,2.1,1.7,1.3,0.9]
        var linear = d3.scale.linear().domain([0,d3.max(dataset)]).range([0,250])
        //var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
        var rectHeight = 25
        d3.select("svg").selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x",20)
        .attr("y",function(d,i){
            return i*rectHeight
        })
        .attr("width",function(d){
            return linear(d)
        })
        .attr("height",rectHeight-2)
        .attr("fill","steeblue")
    </script>
</html>